<template>
  <xtx-bread>
    <xtx-bread-item to="/">首页</xtx-bread-item>
    <xtx-bread-item v-if="category && category.top" :to="`/cate/${category.top.id}`">{{ category.top.name
    }}</xtx-bread-item>
    <Transition name="fade-right" mode="out-in">
      <xtx-bread-item v-if="category && category.second" :key="category.second.id">{{ category.second.name
      }}</xtx-bread-item>
    </Transition>
  </xtx-bread>
</template>
<script setup>
import { computed } from 'vue'
import { useStore } from 'vuex'
import { useRoute } from 'vue-router'
// 从vuex中获取一级和二级数据：id和name
const store = useStore()
const route = useRoute()
/* console.log(10 && 20) // 20
console.log(0 && 20) // 0
console.log(10 || 20) // 10
console.log(0 || 20) // 20 */

const category = computed(() => {
  const cate = {}
  store.state.cate.cateList.forEach(item => {
    // 查找二级分类id等于路由地址的id的数据
    // 有的分类可能没有子分类
    const row = item.children && item.children.find(item1 => item1.id === route.params.id)
    if (row) {
      // 一级分类
      cate.top = { id: item.id, name: item.name }
      // 二级分类
      cate.second = { id: row.id, name: row.name }
    }
    /* const cate1 = item.children && item.children.filter(item1 => item1.id === route.params.id).map(item2 => ({ top: { id: item.id, name: item.name }, second: { id: item2.id, name: item2.name } }))
    if (cate1 && cate1.length) cate = cate1 */
  })
  return cate
})
</script>